import './table.scss';
import { cssPrefix } from '../baseData';
import Icon from '../icon/Icon.jsx';

import React from 'react';

import Pagination from '../pagination/Pagination.jsx';

import { Thead, Tbody } from './TableItems.jsx';


export default class Table extends React.Component{
  static defaultProps ={
    showHeader: true,
    bordered: true
  };

  constructor(props){
    super(props)
    this.state = {
      ...props
    }
  }

  componentWillReceiveProps(props){
    this.setState({
      ...this.state,
      ...props
    })
  }

  render(){
    let { loading, dataSource, bordered, showHeader, footer, pagination } = this.state;

    return <div className={`${cssPrefix}table`}>

      {
        pagination && pagination.position == 'top'
        && <div className={`${cssPrefix}table-pagination`}><Pagination {...pagination} /></div>
      }

      <div className={`${bordered ? `${cssPrefix}table-bordered` : '' }`}>
        {
          loading && <div className={`${cssPrefix}table-loading`}><Icon type={'loading'} spin /></div>
        }

        <table>
          {
            showHeader && <Thead {...this.state} />
          }
          <Tbody {...this.state} />
        </table>

        {
          dataSource && footer && <div className={`${cssPrefix}table-footer`}>{footer()}</div>
        }
      </div>

      {
        pagination && (!pagination.position || pagination.position == 'bottom')
        && <div className={`${cssPrefix}table-pagination`}><Pagination {...pagination} /></div>
      }
    </div>
  }
}